<template>
  <div id="video_app">
    <nav-header></nav-header>
    <div class="zh-video-config">
      <el-form ref="st_form" label-position="top">
        <el-form-item label="直播清晰度配置：" class="optionItem">
          <div class="tip">
            说明：开启后，直播的播放器可以进行清晰度切换，并采用m3u8流进行播放。
          </div>
          <el-radio-group v-model="live_form.status">
            <el-radio label="1">开启</el-radio>
            <el-radio label="2">关闭</el-radio>
          </el-radio-group>
          <div class="button">
            <el-button size="small" type="primary" @click.stop="changeLive(1)"
              >保存</el-button
            >
          </div>
        </el-form-item>
        <el-form-item label="录制视频自动审核配置：" class="optionItem">
          <div class="tip">
            说明：开启后，直播录制的视频会从录制文件列表自动审核到视频列表。
          </div>
          <el-radio-group v-model="audit_form.status">
            <el-radio label="1">开启</el-radio>
            <el-radio label="2">关闭</el-radio>
          </el-radio-group>
          <div class="button">
            <el-button size="small" type="primary" @click.stop="changeLive(2)"
              >保存</el-button
            >
          </div>
        </el-form-item>
        <el-form-item label="直播推流服务器ip配置：" class="optionItem">
          <div class="tip">
            说明：直播无画面时，检查下面框里的ip是否为当前的服务器ip。
          </div>
          <div class="input">
            <div class="title">服务器ip：</div>
            <el-input
              v-model="ip_form.ip"
              placeholder="请输入正确的ip地址"
              @blur="isValidIP(ip_form.ip)"
            ></el-input>
          </div>
          <div class="errorHint" v-show="isShowError">请输入正确的ip地址</div>

          <div class="button">
            <el-button
              size="small"
              type="primary"
              @click.stop="handleLiveServer(1, ip_form.ip)"
              >保存</el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShowError: false,
      live_form: {
        type: 1,
        status: "",
      },
      audit_form: {
        type: 2,
        status: "",
      },
      ip_form: {
        ip: "",
      },
    };
  },

  created() {
    this.init();
  },

  methods: {
    getLiveServer(type) {
      let success = (res) => {
        this.ip_form.ip = res.data;
      };
      this.$ajax.get("/api/video/live_server_show", {
        params: {
          type,
        },
        func: {
          success,
        },
      });
    },
    handleLiveServer(type, server_addr) {
      let success = (res) => {
        this.$message.success(res.msg);
        this.init();
      };
      this.$ajax.put(
        "/api/video/live_server_show",
        {
          type,
          server_addr,
        },
        { func: { success } }
      );
    },
    isValidIP(value) {
      let reg =
        /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
      let flag = reg.test(value);
      console.log(value, flag);

      if (!flag) {
        this.isShowError = true;
      } else {
        this.isShowError = false;
      }
      console.log(this.isShowError);
    },
    init() {
      this.getLiveForm(1);
      this.getLiveForm(2);
      this.getLiveServer(1);
    },
    getLiveForm(type) {
      let success = (res) => {
        if (res.data.m3u8_show)
          this.live_form.status = res.data.m3u8_show.toString();
        if (res.data.auto_show)
          this.audit_form.status = res.data.auto_show.toString();
      };
      this.$ajax.get("/api/video/live_app_show", {
        params: { type },
        func: { success: success },
      });
    },
    changeLive(type) {
      let status;
      if (type == 1) status = this.live_form.status;
      if (type == 2) status = this.audit_form.status;
      let success = (res) => {
        this.$message.success(res.msg);
        this.init();
        // this.$message.success(data.msg);
      };
      this.$ajax.put(
        "/api/video/live_app_show",
        { type, status },
        { func: { success: success } }
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.zh-video-config {
  margin-bottom: 20px;
  .optionItem {
    border-bottom: 1px solid #e6e6e6;
    padding-bottom: 20px;
  }
  .button {
    margin-top: 12px;
  }
  .tip {
    font-size: 12px;
    height: 1rem;
    line-height: 1rem;
    color: #606266;
    margin-top: -15px;
    margin-bottom: 10px;
  }
  .input {
    color: #606266;
    width: 300px;
    display: flex;
    .el-input {
      width: 160px;
    }
  }
  .errorHint {
    color: red;
    font-size: 12px;
    margin-top: -6px;
    margin-left: 70px;
  }
}
</style>